<template>
  <div :class="{ Main: PageData.buttonS, Acta: !PageData.buttonS }">
    <span class="Buttons" v-show="!PageData.pageSizeShow">共{{ PageData.total }}项数据</span>
    <div :class="{ pageSize: !PageData.pageShow }" v-show="!PageData.pageShow">
      <el-pagination
        :pager-count="PageData.pagerCount || 7"
        :small="PageData.small"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 20, 40, 60, 80, 100]"
        :layout="layout || 'sizes, prev, pager, next, jumper'"
        :total="PageData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'PageModule'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { computed, defineProps, ref } from 'vue'

//defineProps
interface Props {
  PageData: {
    pagerCount?: number
    total: number
    pageSizeShow: Boolean
    buttonS: Boolean
    pageShow: Boolean
    small: boolean
  }
  layout?: string
  pageSize: number
}
const props = defineProps<Props>()

const currentPage = ref(1)

const pageSize = ref(40)
const ComputedPageSize = () => {
  if (props.pageSize === undefined) {
    pageSize.value = 40
  } else {
    pageSize.value = props.pageSize
  }
}
ComputedPageSize()

const $emits = defineEmits(['pageChange', 'pageSizeChange'])

const handleSizeChange = (val: number) => {
  $emits('pageSizeChange', val) // 发射每页显示的条目数给父组件
}

const handleCurrentChange = (val: number) => {
  $emits('pageChange', val) // 发射当前页数给父组件
}

// 保存数据
const save = () => {}

// 打印数据
const print = () => {}
</script>

<style lang="less" scoped>
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .Buttons {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .Buttons {
    display: none;
  }
}

.Main {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.is-active.number) {
  background-color: var(--el-color-primary);
  color: white;
  border-radius: 3px 3px 3px 3px;
}

.active {
  position: absolute;
  right: 0;
  margin-top: 10px;
}

.Acta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  position: relative;
  height: 35px;
}

.pageSize {
  margin: auto;
}
</style>
